<template>
  <div>
    <div class="provider-list">
      <div class="content">
        <div class="project-info">
          <div class="form-left-right">
            <el-form
              style="max-width: 1200px"
              :model="form"
              :rules="rules"
              ref="formRef"
              label-position="top"
            >
              <el-form-item label="课程名称：" prop="kechengmingcheng">
                <el-input
                  size="large"
                  maxlength="150"
                  v-model="state.form.kechengmingcheng"
                />
              </el-form-item>
              <el-form-item label="观看链接：" prop="lianjie">
                <el-input size="large" v-model="state.form.lianjie" />
              </el-form-item>
              <el-form-item label="图片(建议尺寸:718*364px)" prop="tupian">
                <bjz-oss
                  :previewList="state.form.tupian"
                  :accept="['.jpg', '.png', '.jpeg']"
                  @success="successImg"
                  @remove="removeImg"
                />
              </el-form-item>
              <el-form-item label="缩略图(建议尺寸:204*176px)" prop="suoluetu">
                <bjz-oss
                  :previewList="state.form.suoluetu"
                  :accept="['.jpg', '.png', '.jpeg']"
                  @success="successImg1"
                  @remove="removeImg1"
                />
              </el-form-item>
              <el-form-item
                class="vue-editor"
                label="培训介绍："
                prop="peixunjieshao"
              >
                <editor :initValue="state.form.peixunjieshao" @onVal="onVal" />
              </el-form-item>
              <el-form-item label="状态：">
                <el-radio-group v-model="state.form.shangjia">
                  <el-radio :label="1">上架</el-radio>
                  <el-radio :label="0">下架</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="button-group">
                <el-button
                  style="margin-left: 100px"
                  type="primary"
                  @click="submitForm(formRef)"
                  >提交</el-button
                >
                <el-button
                  type="primary"
                  style="margin-left: 50px"
                  @click="$router.go(-1)"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { AddOpenLesson, EditOpenLesson, GetOpenLesson } from "@/api/openLesson";
import { baseMsg } from "@/utils/utils";
const route = useRoute();
const router = useRouter();
const formRef = ref(null);
const validateImg = (rule, value, callback) => {
  if (state.form.tupian && state.form.tupian.length) {
    callback();
  } else {
    callback(new Error("请上传图片"));
  }
};
const validateImg1 = (rule, value, callback) => {
  if (state.form.suoluetu && state.form.suoluetu.length) {
    callback();
  } else {
    callback(new Error("请上传缩略图"));
  }
};
const rules = {
  kechengmingcheng: [
    {
      required: true,
      message: "请输入课程名称",
      trigger: "blur",
    },
  ],
  lianjie: [
    {
      required: true,
      message: "请输入观看链接",
      trigger: "blur",
    },
  ],
  tupian: [
    {
      required: true,
      trigger: "blur",
      validator: validateImg,
    },
  ],
  suoluetu: [
    {
      required: true,
      trigger: "blur",
      validator: validateImg1,
    },
  ],
  peixunjieshao: [
    {
      required: true,
      message: "请输入培训介绍",
      trigger: "blur",
    },
  ],
};
const state = reactive({
  form: {
    kechengmingcheng: "",
    lianjie: "",
    tupian: [],
    suoluetu: [],
    peixunjieshao: "",
    shangjia: 0,
  },
});
const GetOpenLessonInfo = () => {
  if (route.query.type === "edit") {
    GetOpenLesson({ id: route.query.id }).then((res) => {
      if (res.code === 4201) {
        state.form = res.data;
      }
    });
  }
};
// 图片上传
const successImg = (res) => {
  state.form.tupian.push(res);
};
// 图片删除
const removeImg = (index) => {
  state.form.tupian.splice(index, 1);
};
// 缩略图片上传
const successImg1 = (res) => {
  state.form.suoluetu.push(res);
};
// 缩略图片删除
const removeImg1 = (index) => {
  state.form.suoluetu.splice(index, 1);
};
// 富文本编辑器
const onVal = (val) => {
  state.form.peixunjieshao = val;
};
// 提交表单
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (route.query.type == "add") {
        AddOpenLesson(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("新增公开课/内训成功");
            router.go(-1);
          }
        });
      }
      if (route.query.type == "edit") {
        EditOpenLesson(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("编辑公开课/内训成功");
            router.go(-1);
          }
        });
      }
    }
  });
};
GetOpenLessonInfo();
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
}
.project-info {
  padding: 30px 100px;
  font-size: 20px;
  color: black;
  display: flex;
}
</style>
<style lang="scss">
.button-group {
  .el-form-item__content {
    width: 100% !important;
    justify-content: center;
  }
}
</style>
